<template>
	<view class="add-address-wrapper">
		<view class="form-item flex-c">
			<text class="form-item-lable">姓名</text>
			<input type="text" class="address-input" v-model="formData.names" placeholder="请输入姓名" />
		</view>
		<view class="form-item flex-c">
			<text class="form-item-lable">手机号码</text>
			<input type="text" class="address-input" v-model="formData.phone" placeholder="请输入手机号码" />
		</view>
		<view class="form-item flex-c">
			<text class="form-item-lable">选择地区</text>
			<uni-data-picker v-model="addressInfo" :localdata="address" popup-title="选择地区" @change="onchange" @nodeclick="onnodeclick">
				<view class="fz26">
					{{ formData.province }} {{ formData.city }} {{ formData.prefecture || '选择地区' }} 
				</view>
				<!-- <view class="address-detail" v-if="addressInfo.length">
					<text v-for="item of addressInfo" :key="item.value" style="margin-right: 12rpx;">{{item.text}},</text>
				</view> -->
			</uni-data-picker> 
		</view>
		<view class="form-item flex-c">
			<text class="form-item-lable">街道信息</text>
			<input type="text" class="address-input" v-model="formData.street" placeholder="请输入街道信息" />
		</view>
		<view class="form-item flex-c">
			<text class="form-item-lable">详细地址</text>
			<input type="text" class="address-input" v-model="formData.detailAddress" placeholder="请输入详细地址" />
		</view>
		<view class="form-item flex-c-s">
			<text class="form-item-lable" style="width: 200rpx;">设置为默认地址</text>
			<switch :checked="checked" color="#EB5883" @change="switchChange" />
		</view>
		<button class="save-btn public-large-btn" @click="createLocation">保 存</button>

		
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onReady, onLoad } from '@dcloudio/uni-app'
import { addressData } from '@/config/addressData'
import { createAddress, editAddress } from '@/http/my'

import type { IAddress } from '@/types'

export default defineComponent({
	setup() {
		const address = [...addressData]
		const formData = reactive<IAddress>({
			names: '',
			phone: '',
			street: '',
			province: '',
			city: '',
			prefecture: '', 
			defaultFlag: 0,
			detailAddress: '',
			identity: ''
		})
		const state = reactive({
			addressInfo: [] as Array<{value: string, text: string}>,
			checked: false
		})
		onReady(() => {
			//console.log(addressData[0]);
		})
		
		onLoad((option: any) => {
			if(option.obj) {
				let {names, phone, Province, city, id, street ,prefecture, defaultFlag, detailAddress, identity} = JSON.parse(option.obj) as IAddress;
				formData.names = names
				formData.phone = phone
				formData.province = Province!;
				formData.city = city
				formData.prefecture = prefecture
				formData.street = street
				formData.id = id
				formData.identity = identity
				formData.detailAddress = detailAddress
				state.checked = Number(defaultFlag) === 1 ? true : false
			}
			console.log(option);
		})
		const onchange = (e: any) => {
			if(e.detail.value && e.detail.value.length) {
				console.log(e);
				// let [province, city, prefecture] = e.detail.value
				formData.province = e.detail.value[0].text
				formData.city = e.detail.value[1].text
				formData.prefecture = e.detail.value[2].text 
				console.log(formData);
			} 
		}
		const onnodeclick = (e: any) => {
			
		}
		
		const createLocation = async () => {
			let res: any;
			let pramas = {
				names: formData.names,
				phone: formData.phone,
				province: formData.province,
				city: formData.city,
				prefecture: formData.prefecture,
				street: formData.street,
				defaultFlag: formData.defaultFlag,
				detailAddress: formData.detailAddress,
			} as IAddress 
			if(formData?.id! > 0) {
				pramas.id = formData.id
				pramas.Province = formData.province
				pramas.detailAddress = formData.detailAddress
				pramas.identity = formData.identity
				
				delete pramas.province
				res = await editAddress(pramas)
				console.log(res, 999);
			} else {
				res = await createAddress(pramas)
			}
			console.log(res, pramas);
			if(res.code === 0) {
				uni.showToast({
					title: formData.id ? '编辑成功' : '添加成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: formData.id ? '编辑失败' : '添加失败',
					icon: 'error'
				})
			}
		}
		
		const switchChange = (e: any) => {
			formData.defaultFlag = e.detail.value ? 1 : 0
		}
		
		return {
			address,
			formData,
			onnodeclick,
			onchange,
			switchChange,
			createLocation,
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.add-address-wrapper{
	.form-item{
		margin:1rpx 24rpx;
		padding: 36rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		text{
			width: 160rpx;
			font-size: 26rpx;
		}
		input{
			height: 30rpx;
		}
	}
	.save-btn{
		margin-top: 80rpx;
	}
	.address-input{
		flex: 1;
		font-size: 26rpx;
	}
}
</style>